Skip to content

[Hacktoberfest] Enhance Debezium Event Feed UI (fade-in animation, color-coded messages)#21

Merged
AndrGab merged 4 commits into
AndrGab:mainfrom
Rickveloper:main
Oct 9, 2025
Merged

[Hacktoberfest] Enhance Debezium Event Feed UI (fade-in animation, color-coded messages)#21
AndrGab merged 4 commits into
AndrGab:mainfrom
Rickveloper:main

Conversation

@Rickveloper
Copy link
Copy Markdown
Contributor

Summary

Improved the visual rendering of real-time CDC messages for better readability and UX.

Changes

  • Added fade-in animation for incoming CDC events
  • Added timestamp below each message
  • Color-coded event types (INSERT, UPDATE, DELETE)
  • Maintained compatibility with the existing WebSocket CDC pipeline

Result

The Debezium event stream now appears as a clean, animated feed that highlights each incoming change event with distinct visual cues and improved accessibility.

Added animated event feed bubbles (slide-in, timestamps, color-coded)
Enhanced script.js with live event rendering, timestamps, and color-coded messages
Integrate fade-in animation and timestamps in message renderer
@AndrGab
Copy link
Copy Markdown
Owner

AndrGab commented Oct 8, 2025

@Rickveloper can u fix the conflicts please?

@Rickveloper
Copy link
Copy Markdown
Contributor Author

@AndrGab Conflicts resolved! All ready for review 🚀

Copy link
Copy Markdown
Owner

@AndrGab AndrGab left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm
thx ❤️

@AndrGab AndrGab merged commit 489d1d7 into AndrGab:main Oct 9, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants